@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3598568_m6681dzp56.css);
@function getvw($w) {
  @return ($w/750) * 100 + vw;
}
@keyframes tang {
  from {
    transform: translateX(0px);
  }

  66% {
    transform: translateX(-375px);
  }

  to {
    transform: translateX(0px);
  }
}

.wrap {
  header {
    nav {
      display: flex;
      padding: getvw(17) getvw(23) getvw(9) getvw(23);
      align-items: center;
      justify-content: space-between;
      .logo {
        width: getvw(123);
        height: getvw(123);
      }
      .search {
        position: relative;
        input {
          width: getvw(265);
          height: getvw(50);
          border: 1px solid #ff9344;
          border-radius: getvw(50);
          font-size: getvw(24);
          padding: 0 getvw(25);
        }
        i {
          font-size: getvw(30);
          color: #ff9344;
          position: absolute;
          right: getvw(24);
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .area {
        position: relative;
        select {
          width: getvw(160);
          height: getvw(55);
          border: 1px solid #ff9344;
          appearance: none;
          padding-left: getvw(14);
        }
        i {
          font-size: getvw(30);
          color: #ff9344;
          position: absolute;
          right: getvw(11);
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
        }
      }
    }
    .banner {
      width: 100%;
      height: getvw(287);
      overflow: hidden;

      .box4 {
        animation: tang 5s ease 1s infinite alternate none running;
        width: 200%;
        height: getvw(287);

        display: flex;
        .box1 {
          width: calc(100%/2);
          img {
            width: 100%;
            display: block;
          }
        }

      }
    }
  }
  main {
    .box1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(49);
      margin: getvw(20) auto;
      .box2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
      }
      .box3 {
        display: flex;
        align-items: center;
        i {
          width: getvw(32);
          height: getvw(47);
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .son {
      width: getvw(708);
      height: getvw(291);
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: space-between;

      .son1 {
        text-align: center;
        top: getvw(20);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;

        img {
          width: getvw(241);
          height: getvw(94);
        }
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(49);
      margin: 0 auto;
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
        h3{
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          width: getvw(25);
          height: getvw(26);
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .img {
      width: getvw(717);
      height: getvw(170);
      display: flex;
      justify-content: space-between;
      margin-left: getvw(10);
      .img4 {
        display: flex;
        .img1 {
          width: getvw(211);
          img {
            width: 100%;
            display: block;
          }
        }

        .img2 {
          width: getvw(350);
          height: getvw(164);
          justify-content: space-around;
          padding: getvw(5) getvw(5);
          line-height: getvw(50);
          i {
            color: #ff9344;
          }
        }
      }
      .img3 {
        height: getvw(164);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p {
          display: flex;
        }
      }
    }
    .head {
      width: getvw(717);
      height: getvw(170);
      top: getvw(20);
      display: flex;
      justify-content: space-between;
      margin-left: getvw(10);
      .head4 {
        display: flex;
        margin-top: getvw(10);
        .head1 {
          width: getvw(211);
          img {
            width: 100%;
            display: block;
          }
        }
        .head2 {
          width: getvw(350);
          height: getvw(164);
          justify-content: space-around;
          padding: getvw(5) getvw(5);
          line-height: getvw(50);
          i {
            color: #ff9344;
          }
        }
      }
      .head3 {
        margin-top: getvw(10);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .heat {
      width: getvw(717);
      height: getvw(170);
      top: getvw(20);
      display: flex;
      justify-content: space-between;
      margin-left: getvw(10);
      .head4 {
        display: flex;
        margin-top: getvw(10);
        .head1 {
          width: getvw(211);
          img {
            width: 100%;
            display: block;
          }
        }
        .head2 {
          width: getvw(350);
          height: getvw(164);
          justify-content: space-around;
          padding: getvw(5) getvw(5);
          line-height: getvw(50);
          i {
            color: #ff9344;
          }
        }
      }
      .head3 {
        margin-top: getvw(10);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    
  }
  footer {
    position: fixed;
    bottom: 0;
    background-color: aliceblue;
    width: 100%;
    margin-top: getvw(50);
    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: getvw(20);
      width: getvw(708);
      height: getvw(120);
      .font1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        p{
          a{
            color: black;
          }
        }
      }
      i {
        font-size: getvw(40);
        color: #ff9344;
      }
    }
  }
}
